<template class="task-template">
  <section id="abp-cli-switch-section" class="section js-section u-category-abp-cli">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
          Abp CLI: <code>switch-to-preview</code> & <code>switch-to-stable</code>
        </h1>
        <h3>Switch your project to latest preview version of the ABP framework packages, or switch back to stable version using this command.</h3>
        <p>See the <a href="https://docs.abp.io/en/abp/latest/CLI#switch-to-preview">ABP framework documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser for more informations.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Switch to preview
          <div class="demo-meta u-avoid-clicks">You can use this command to switch your project to latest preview version of the ABP framework packages</div>
        </button>
        <div id="box-abp-cli-switch-to-preview" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp switch-to-preview [options]</code></pre>

          <div id="switch-to-preview-options">
            <h5>Startup Project</h5>
            <div style="margin-top: .6em;">
              <input id="switch-to-preview-solution-directory" class="demo-input" type="text" />
              <button id="switch-to-preview-solution-directory-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="switch-to-preview-solution-directory-desc">Specifies the directory. The solution should be in that directory or in any of its sub directories. If not specified, default is the current directory.</p>
          </div>

          <h5>
            <button class="demo-button" id="switch-to-preview-execute">Execute</button>
          </h5>

          <div id="switch-to-preview-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Switch to stable
          <div class="demo-meta u-avoid-clicks">If you're using the ABP Framework preview packages, you can switch back to stable version using this command</div>
        </button>
        <div id="box-abp-cli-switch-to-stable" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp switch-to-stable [options]</code></pre>

          <div id="switch-to-stable-options">
            <h5>Startup Project</h5>
            <div style="margin-top: .6em;">
              <input id="switch-to-stable-solution-directory" class="demo-input" type="text" />
              <button id="switch-to-stable-solution-directory-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="switch-to-stable-solution-directory-desc">Specifies the directory. The solution should be in that directory or in any of its sub directories. If not specified, default is the current directory.</p>
          </div>

          <h5>
            <button class="demo-button" id="switch-to-stable-execute">Execute</button>
          </h5>

          <div id="switch-to-stable-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/abp-cli/abp-cli-switch-to-preview.js')
      require('./renderer-process/abp-cli/abp-cli-switch-to-stable.js')
    </script>

  </section>
</template>
